<template>
  <view class="wrap">
    <view class="header">
      <view class="userinfo">
        <view class="image" @click="navTo('info')">
          <!-- <image :src="userInfo.avatar"></image> -->
          <u-avatar size="100" :src="avatarUrl"></u-avatar>
        </view>
        <view
          class="info"
          style="display: flex; justify-content: center;align-items: center;"
        >
          <view>
            <view class="username">{{ userInfo.nickName }}</view>
          </view>
          <view class="sign-in-images"
            ><image src="/static/aidex/images/sign-in.png"></image
          ></view>
        </view>
      </view>
    </view>
    <view class="list">
      <view>
        <u-cell-group class="personal-list">
          <u-gap height="20" bg-color="#f5f5f5"></u-gap>
          <u-cell-item
            icon="kefu-ermai"
            :iconStyle="{ color: '#5f8dff' }"
            title="意见反馈"
            @click="navTo('comment')"
          ></u-cell-item>
          <u-cell-item
            icon="map"
            :iconStyle="{ color: '#316ede' }"
            title="修改密码"
            @click="navTo('pwd')"
          ></u-cell-item>
          <u-cell-item
            icon="account"
            :iconStyle="{ color: '#27c0dc' }"
            title="关于我们"
            @click="navTo('about')"
          ></u-cell-item>
          <u-cell-item
            icon="kefu-ermai"
            :iconStyle="{ color: '#ff8a00' }"
            title="联系客服"
            @click="navTo('service')"
          ></u-cell-item>
          <u-gap height="20" bg-color="#f5f5f5"></u-gap>
          <u-cell-item
            icon="setting"
            :iconStyle="{ color: '#2767dc' }"
            title="退出登录"
            @click="logout"
          ></u-cell-item>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
export default {
  data() {
    return {
      iconSize: 38,
      avatarUrl: '',
      userInfo: {},
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('sgkj_userInfo')
    this.avatarUrl =
      this.vuex_config.baseUrl + this.userInfo.avatar ||
      '/static/aidex/tabbar/my_2.png'
  },
  onShow() {
    this.$u.api.getUserInfo().then((res) => {
      if (res.code == '200') {
        this.userInfo = res.user
        this.avatarUrl = this.vuex_config.baseUrl + res.user.avatar
      }
    })
  },
  methods: {
    navTo(url) {
      uni.navigateTo({
        url: url,
      })
    },
    logout() {
      this.$u.api.logout().then((res) => {
        this.$u.toast(res.msg)
        if (res.code == '200' || res.code == '401') {
          uni.clearStorage()
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/sys/login/index',
            })
          }, 500)
        }
      })
    },
  },
}
</script>
<style lang="scss">
@import 'index.scss';
page {
  background-color: #f5f5f5;
}
.wrap .u-cell-box .u-cell_title {
  color: #202328;
}
.sign-in-images {
  width: 125rpx;
  height: 50rpx;
  position: absolute;
  right: 0;
  top: 5px;
  uni-image {
    width: 125rpx;
    height: 50rpx;
  }
}
</style>
